<%@page import="com.mconnect.msurvey.controller.DevelopingLanguagesManager"%>
<%@page import="com.mconnect.msurvey.model.DevelopingLanguages"%>
<%@page import="com.mconnect.msurvey.model.TechnicalQuestions"%>
<%@page import="com.mconnect.msurvey.controller.TechnicalQuestionsManager"%>
<%@page import="com.mconnect.msurvey.model.ResponderRecommended"%>
<%@page import="com.mconnect.msurvey.controller.RecommendedManager"%>
<%@page import="com.mconnect.msurvey.controller.CategoryManager"%>
<%@page import="com.mconnect.msurvey.model.Questions"%>
<%@page import="com.mconnect.msurvey.controller.QuestionsManager"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@page import="com.mconnect.msurvey.model.Responder"%>
<%@page import="com.mconnect.msurvey.controller.ResponderManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<style>
            .errorMessage{
	  		color: red;
	  		font-style: italic;
	  		font-size: large;
	  		}
	  		
	  		.ui-accordion-content{
	  			height: 200px;
	  		}
	  		
			table.center{
				margin:0 auto;
			}
			div.center{
				margin:0 auto;
				text-align: center;
				
			}
			
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 775px; margin-left: auto; margin-right: auto;  text-align: left; font-family: Arial; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		th#jaca1 { border: 1px solid #eee; padding: .6em 10px; text-align: left; text-align: center;}
		td#jaca1 { border: 1px solid #eee; padding: .2em 2px; text-align: left; text-align: center;}
		th{color: black;}
</style>
<SCRIPT type="text/javascript" src="js/validationForm.js" charset="UTF-8"> </SCRIPT>
<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/external/jquery.bgiframe-2.1.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.mouse.js"></script>
	<script src="js/jQuery/ui/jquery.ui.button.js"></script>
	<script src="js/jQuery/ui/jquery.ui.draggable.js"></script>
	<script src="js/jQuery/ui/jquery.ui.position.js"></script>
	<script src="js/jQuery/ui/jquery.ui.resizable.js"></script>
	<script src="js/jQuery/ui/jquery.ui.dialog.js"></script>
	<script src="js/jQuery/ui/jquery.ui.effect.js"></script>
	<script src="js/jQuery/ui/jquery.ui.accordion.js"></script>
	<script src="js/jQuery/ui/jquery.ui.datepicker.js" charset="utf-8"></script>
	
	<link rel="stylesheet" href="resources/css/ap.css">
	  <link rel="stylesheet" href="js/jQuery/demos.css">
	  <link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
	  <link type="text/css" href="js/jQuery/css/smoothness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />
	  <link rel="stylesheet" href="resources/css/detail_style.css">

<script type="text/javascript">
$(function(){
	$.fx.speeds._default = 200; 
	$( "#surveyContent_dialog" ).dialog({ 
			autoOpen: true,
			width: 900,
			minWidth: 700,
			height: 700,
			show: "explode",	
			hide: "explode"	,
			close: function (){
				$('.ui-dialog').remove();
			}
	}); 
	$( "#opener" ).click(function() {	
		$( "#surveyContent_dialog" ).dialog( "open" );	
		return false; 
	}); 
	
	
	$("#closeDialog").click(function(){
		$("#surveyContent_dialog").dialog("close");
	});

	var time = $( "#time" ),
	data = $( "#datepicker" );
	allFields = $( [] ).add( data ).add( time ),
	tips = $( ".validateTips" ),
	message = $( ".messageTips" );
	
	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}
	
	
	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Pole " + n + " nie może być puste.");
			return false;
		} else {
			return true;
		}
	}

	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 300,
		width: 350,
		modal: true,
		buttons: {
			"Zapisz": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );
				
				bValid = bValid && checkLength( data, "Daty", 1, 16 );
				bValid = bValid && checkLength( time, "Godziny", 1, 20 );
				
				var times = document.getElementById("time").value;
				var datas = document.getElementById("datepicker").value;
				var id_responders = document.getElementById("id_responder").value;
				
				if ( bValid ) {
				$.get(
						'confirmResponder.action',
						{
							time: times,
							date: datas,
							id_responder: id_responders
						},
						function (content) {
							$('#msg').html(content);
							alert("Zapisano!");
							$( "#surveyContent_dialog" ).dialog("close");
							return false;
						}
					);
					$( this ).dialog( "close" );
					document.getElementById("create-confirm").disabled = true;
					
				}
				
			},
			"Anuluj": function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.removeClass( "ui-state-error" );
		}
	});

	$( "#create-confirm" )
		.button()
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
	
	$( "#datepicker" ).datepicker();
	
	$('#updateResponderNOT').click(function(){
		
		var id_responders = document.getElementById("id_responder").value;
		$.get(
				'updateResponder.action',
				{
					id_responder: id_responders
					
				},
				function (content) {
					$('#msg').html(content);
					alert("Zapisano!");
					$( "#surveyContent_dialog" ).dialog("close");
					return false;
				}
			);
		
	});
	
});
</script>


<%
	request.setCharacterEncoding("utf-8");
	String firstname = request.getParameter("firstname");
	String lastname =request.getParameter("lastname");
	int id_survey = Integer.parseInt(request.getParameter("id_survey"));
	int id_responder = Integer.parseInt(request.getParameter("id_responder"));
	String date = request.getParameter("date");
	ResponderManager rsM = new ResponderManager();
	String confirm = rsM.getConfirmByIdResponder(id_responder);
	
	QuestionsManager qM = new QuestionsManager();
	List<Questions> questionsList = new ArrayList<Questions>();
	questionsList = qM.getQuestionsAfterIdFromDB(id_survey);
	
	CategoryManager cM = new CategoryManager();
	List<String> categoryList = new ArrayList<String>();
	categoryList = cM.getCategoryByIdSurvey(id_survey);
	
	TechnicalQuestionsManager tM = new TechnicalQuestionsManager();
	List<TechnicalQuestions> technicalList = new ArrayList<TechnicalQuestions>();
	technicalList = tM.getQuestionsByIdSurvey(id_survey);
	DevelopingLanguages language = (DevelopingLanguages)technicalList.iterator().next().getId_language();
	DevelopingLanguagesManager dM = new DevelopingLanguagesManager();
	String languages = dM.getStringLanguage(language);
	
	RecommendedManager rM = new RecommendedManager();
	List<ResponderRecommended> recommendedList = new ArrayList<ResponderRecommended>();
	recommendedList = rM.getRecommendedListAfterId(id_responder);
%>

<div style="display: none; z-index: 1006; outline: 0px none; position: absolute; height: auto; width: 1024px; top: 100px; left: 158.5px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog Title</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
	<div id="surveyContent_dialog" title="Szczegóły" class="calendarCallback ui-dialog-content ui-widget-content" style="width: auto; min-height: 60.4px; height: auto; position: relative;" scrolltop="0" scrollleft="0">
		    <div style="width: 800px;  " class="center">
   		<div style="float: left; margin-left: 10px;">
    		<table style="color: black; font-weight: bold; font-size: 13px; text-align: center;">
    			<tr>
    				<td>Miejsce: </td>
    				<td><%= "  " + request.getParameter("region") %></td>
    			</tr>
    		</table>
    	</div>
    	<div style="float: right; margin-right: 10px;">
    		<table style="color: black; font-weight: bold; font-size: 13px; text-align: center;">
    			<tr>
    				<td>Data przeprowadzenia ankiety:</td>
    				<td width="100px;"><%= date %></td>
    			</tr>
    		</table>
    	</div>
    	<div id="users-contain" class="ui-widget" >	
			<div id="d_all">
		      <div id="d_top1">
		     
		             <div class="d_a" style="width: 130px;">
		              <div class="a" >Imie i nazwisko</div>
		             </div>
		             <div class="d_b" style="width: 150px;">
		                <div class="b"><%= firstname + " " + lastname %></div>
		             </div>
		             <div class="d_a" style="width: 65px;">
		                <div class="a">Telefon</div>
		             </div>
		             <div class="d_b">
		                <div class="b"><%=request.getParameter("phone") %></div>
		             </div>
		             <div class="d_a" style="width: 65px;">
		                <div class="a">e-mail</div>
		             </div>
		             <div class="d_b">
		                <div class="b"><a style="color: white" href="mailto:<%=request.getParameter("mail") %>"><%=request.getParameter("mail") %></a></div>
		             </div>
		        
		      </div>
		      
		      <div id="d_bottom" style="min-height: 450px;">
		        <div id="d_bottom_txt" style="margin-top: 20px;">
		        	<table style="color: black; width: 600px; font-size: 13px; border: 0">
		        		<tr>
		        			<td id="left">Nazwa uczelni</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion6() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Typ studiów</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion2() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Wiek</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion1() %> lat</td>
		        		</tr>
		        		<tr>
		        			<td id="left">Obecnie pracuje</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion3() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Myśli o zmianie branży</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion4() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Gotowość do podjęcia pracy</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion5() %></td>
		        		</tr>
		        		<tr>
		        			<td style="height: 10px;" ></td>
		        			<td ></td>
		        		</tr>
		        		<tr>
		        			<td id="left" >Kierunek studiów</td>
		        			<td id="right" ><%=technicalList.iterator().next().getDirection() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left" >Znajomość języków programowania</td>
		        			<td id="right" ><%=languages %></td>
		        		</tr>
		        		<tr>
		        			<td id="left" >Znajomość programów deweloperskich</td>
		        			<td id="right" ><%=technicalList.iterator().next().getDevelopingPrograms() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left" >Doświadczenie w branży IT</td>
		        			<td id="right" ><%=technicalList.iterator().next().getExperience() %></td>
		        		</tr>
		        		
		        	</table>
		        	
		        	<div style="float: left; width: 100%; margin-top: 20px;">
		        	Polecone osoby:
		        	<%if(recommendedList.isEmpty()){ %>
		        		<br>
		        		<div class="ui-widget">
							<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em; width: 100%;  background-color: #00FF00;">
								<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
								<strong>Ankietowany nikogo nie polecił.</strong></p>
							</div>
						</div>
					<%}else{ %>
		        		<div id="users-contain" class="ui-widget">
							<table id="users" class="ui-widget ui-widget-content" style="width: 580px; margin-left: 20px; margin-top: 10px; text-align: center; font-size: 11px;">
							<thead>
							<tr class="ui-widget-header ">
								<th id="jaca">Imie</th>
								<th id="jaca">Nazwisko</th>
								<th id="jaca">Telefon</th>
								<th id="jaca">E-mail</th>
							</tr>
							<tbody>
								<% for(ResponderRecommended recommend : recommendedList){ %>
									<tr>
										<td id="jaca1" ><%= recommend.getFirstName() %></td>
										<td id="jaca1"><%= recommend.getLastName() %></td>
										<td id="jaca1"><%= recommend.getPhone()%></td>
										<td id="jaca1"><a style="color: black" href="mailto:<%= recommend.getMail() %>"><%= recommend.getMail() %></a></td>
									</tr>
							<%} %>
							</tbody>	
							</table>
						</div>
						<%} %>
		        	</div>
		        </div>
		      </div>
		    	<div class="center">
		    		<div style="width:100%; float: left;">
		    		<% if("NIE".equals(confirm)){ %>
				    	<div class="d_aBack" style="margin-left: 9%; margin-bottom: 10px; background-color: green; width: 180px;"  >
				        	<button  id="create-confirm" style="color: black; font-weight: bold;" >Potwierdź przybycie</button>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; width: 180px;"  >
				        	<div class="a"><a href="#" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;" id="closeDialog">Anuluj</a></div>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; background-color: red; width: 180px;"  >
				        	<div class="a"><a  href="#" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;" id="updateResponderNOT">Nie potwierdził</a></div>
				        </div>
				       <%}else if("TAK".equals(confirm)){ %>
				       	<div class="d_aBack" style="margin-left: 9%; margin-bottom: 10px; background-color: green; width: 250px;"  >
				        	<div class="a" style="font-style: italic; color: white;">Potwierdził przybycie na rozmowę</div>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; width: 180px;"  >
				        	<div class="a"><a href="#" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;" id="closeDialog">Anuluj</a></div>
				        </div>
				       <%}else if("NOT".equals(confirm)) {%>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; background-color: red; width: 350px;"  >
				        	<div class="a" style="font-style: italic; color: white;">Nie wyraźił zgody na przybycie na rozmowę</div>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; width: 180px;"  >
				        	<div class="a"><a href="#" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;" id="closeDialog">Anuluj</a></div>
				        </div>
				        <%} %>
			        </div>
			        
			        <div id="dialog-form" title="Podaj datę i godzinę spotkania">
			        <p class="validateTips">Wszystkie pola są obowiązkowe.</p>
						<form id="form">
						<fieldset>
							<input type="hidden" id="id_responder" value="<%=id_responder %>">
							<label for="datepicker">Data</label>
							<input type="text"  id="datepicker" name="date" class="text ui-widget-content ui-corner-all" style="color: black;" />
							<label for="time">Godzina</label>
							<input type="text" name="time" id="time" value="" class="text ui-widget-content ui-corner-all" />
						</fieldset>
						</form>
					</div>
					
				</div>
		  </div>
	
	</div>	
    </div>		
	</div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button></div></div></div>
	